<style>
.badage{
  font-size:12px;
  padding:2px 3px;
  background-color:#ccc;
  color:#666;
  margin:5px 3px 0 0;
}
.success{
  background-color:rgb(39, 163, 165);
  color:#fff;
}
.mine-arrow{
  transform: translate(0,50%);
  color: #fff;
  font-size: 20px;
  margin-top: -20px;
}
</style>

<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <h2 class="title">我的</h2>
  </header>
  <div class="page">
    <div class="mine-head displayflex">
      <div class="img"  @click="gotoMsg">
        <img :src="avatar | simpleImgUrl" v-if="userinfo.PictContent">
        <img src="~images/icon/people-ico.png" v-else>
      </div>
      <div class="name flex1" :class="{'star-box':userinfo.UserBizType=='Driver'}">
        <div class="level-box">
          {{username}}
          
          <div class="level-wrap displayflex" v-if="userinfo.UserBizType == 'Cargowner'"  @click="goLevel">
            <div class="pic" v-if="userinfo.ChargedAmount >= 1000"><i class="iconfont icon-v1 icon"></i></div>
            <span class="txt flex1">
              <i v-if="userinfo.ChargedAmount >= 1000">会员</i>
              <i v-else>普通会员</i>
            </span>
            <i class="iconfont icon-right icon"></i>
          </div>

        </div>
        <div class="balance" v-if="userinfo.UserBizType == 'Cargowner'">
          <i class="iconfont icon-balance"></i>余额 : {{Balance.toFixed(2)}}
        </div>

        <div class="tag" v-if="userinfo.UserBizType=='Driver'">
          <template v-if="extraData.IsTrained == 'Y' && extraData.DepositState == 'Y'">
            <span class="badage success">已认证</span>
          </template>
          <template v-else-if="extraData.IsTrained != 'Y' && extraData.DepositState == 'Y'">
            <span class="badage success">保证金已缴</span>
            <span class="badage">未培训</span>
          </template>
          <template v-else-if="extraData.IsTrained == 'Y' && extraData.DepositState != 'Y'">
            <span class="badage">保证金未缴</span>
            <span class="badage success"> 已培训</span>
          </template>
          <template v-else="extraData.IsTrained != 'Y' && extraData.DepositState != 'Y'">
            <span class="badage">保证金未缴</span>
            <span class="badage">未培训</span>
          </template>
        </div>
        <div class="star-wrap" v-if="userinfo.UserBizType=='Driver'"><span>综合评分：</span><rater disabled v-model="extraData.star*1" active-color="#f6a355" :font-size="14"></rater></div>
      </div>
      <i class="iconfont icon-right mine-arrow"  @click="gotoMsg"></i>
    </div>
    <div class="driver-data displayflex" v-if="userinfo.UserBizType=='Driver'">
      <div class="flex1">
        <p class="num">{{extraData.totalDoneBill}}<em>单</em></p>
        <span class="state">共完成</span>
      </div>
      <div class="flex1">
        <p class="num">{{extraData.OnTimePickUp}}</p>
        <span class="state">提货准点率</span>
      </div>
      <div class="flex1">
        <p class="num">{{extraData.OnTimeDeliver}}</p>
        <span class="state">送达准点率</span>
      </div>
    </div>
    <div class="mine-menu displayflex">
      <router-link class="flex1" to='/user/statement'
        v-if="userinfo.UserBizType!='Cargoreceiver' && userinfo.UserBizType!='warehouse'">
        <em class="ctx"><i class="iconfont icon-statement blue"></i>对账单</em>
      </router-link>
      <router-link class="flex1" to='/user/settlement'
         v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse' || userinfo.UserBizType=='Driver'">
        <em class="ctx"><i class="iconfont icon-settlement green2"></i>结算单</em>
      </router-link>
      <router-link class="flex1" to='/user/accountChanges' v-if="userinfo.UserBizType == 'Cargowner' || userinfo.UserBizType=='warehouse'">
        <em class="ctx"><i class="iconfont icon-consumption orange"></i>消费记录</em>
      </router-link>
    </div>
    <ul class="mine-list">
      <!-- <li class="displayflex" @click="goods" v-if="userinfo.UserBizType=='Cargowner'"><i class="iconfont icon-goods green"></i><span class="flex1">我的商品</span><i class="iconfont icon-right"></i></li>-->
      <router-link tag="li" :to="{path:'/user/custom'}" v-if="userinfo.UserBizType=='Cargowner'">
        <div class="box displayflex">
          <i class="iconfont icon-client blue"></i>
          <span class="flex1">人员管理</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      <router-link tag="li" 
        :to="{path:'/address',query:{type:'1',mine:true}}"
        v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">
        <div class="box displayflex">
          <i class="iconfont icon-send blue"></i>
          <span class="flex1">发货地址</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      <router-link tag="li" class="mb20"
        :to="{path:'/address',query:{type:'2',mine:true}}"
        v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">
        <div class="box displayflex lineb0">
          <i class="iconfont icon-address green2"></i>
          <span class="flex1">收货地址</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>

      <!--<router-link tag="li" to='/user/chargerecord' v-if="userinfo.UserBizType =='Cargowner'">
        <div class="box displayflex">
          <i class="iconfont icon-recharge green2"></i>
          <span class="flex1">充值记录</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>-->
      
      <router-link tag="li" to='/user/assess' v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">
        <div class="box displayflex">
          <i class="iconfont icon-assess1 orange"></i>
          <span class="flex1">评价</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      
      <router-link tag="li" to='/user/accountChanges' v-if="userinfo.UserBizType=='Cargoreceiver'">
        <div class="box displayflex">
          <i class="iconfont icon-consumption orange"></i>
          <span class="flex1">消费记录</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>

      <router-link tag="li" to='/user/claim' v-if="userinfo.UserBizType=='Cargowner'">
        <div class="box displayflex">
          <i class="iconfont icon-claim green2"></i>
          <span class="flex1">理赔查询</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      <router-link tag="li" to='/user/complain?type=1'>
        <div class="box displayflex">
          <i class="iconfont icon-complain orange"></i>
          <span class="flex1">投诉管理</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      <router-link tag="li" to='/user/feedback'>
        <div class="box displayflex">
          <i class="iconfont icon-feedback green2"></i>
          <span class="flex1">意见反馈</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      <router-link tag="li" to='/user/assess' v-if="userinfo.UserBizType=='Driver'">
        <div class="box displayflex">
          <i class="iconfont icon-assess orange"></i>
          <span class="flex1">服务评价</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      <li class="mb20">
        <a href="tel:0871-64116889" class="displayflex box lineb0"><i class="iconfont icon-msg orange"></i><span class="flex1">联系客服</span><i class="iconfont icon-right"></i></a>
      </li>
      <router-link tag="li" 
        :to="{path:'password',query:{a:'1'}}">
        <div class="box displayflex">
          <i class="iconfont icon-password orange"></i>
          <span class="flex1">修改密码</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
      <router-link tag="li" to="/user/set">
        <div class="box displayflex lineb0">
          <i class="iconfont icon-set blue"></i>
          <span class="flex1">设置</span>
          <i class="iconfont icon-right"></i>
        </div>
      </router-link>
    </ul>
      <!-- <router-link tag="li" class="displayflex" to='/user/statement'
        v-if="userinfo.UserBizType!='Cargoreceiver' && userinfo.UserBizType!='warehouse'">
        <i class="iconfont icon-order green"></i>
        <span class="flex1">对账单</span>
        <i class="iconfont icon-right"></i>
      </router-link>
        <router-link tag="li" class="displayflex" to='/user/settlement'
         v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse' || userinfo.UserBizType=='Driver'">
        <i class="iconfont icon-order green"></i>
        <span class="flex1">结算单</span>
        <i class="iconfont icon-right"></i>
      </router-link>
      <router-link tag="li" class="displayflex" to='/user/assess' v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">
        <i class="iconfont icon-assess orange"></i>
        <span class="flex1">评价</span>
        <i class="iconfont icon-right"></i>
      </router-link> -->
    <div class="exit" @click="exit">退出登录</div>
  </div>
  <foot-box :status="4" v-if="$route.query.type !== 'driver'"></foot-box>
</div>
</template>

<script>
import footBox from '@/components/share/footerbox.vue';
export default{
  components:{
    footBox
  },
  data() {
    return {
      showLoad: false,
      extraData: {},
      avatar: '',
      Balance:0,
    }
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
    username(){
      if(this.userinfo) {
        return this.userinfo.Name || this.userinfo.LogonUser;
      } 
    },
  },
  mounted(){
    var self = this;
    if(this.userinfo.PictContent)
    {
      if(this.userinfo.PictContent.indexOf('.') > -1)
      {
        self.avatar = self.userinfo.PictContent;
      }
      else
      {
        self.avatar = JSON.parse(self.userinfo.PictContent)[0];
      }
    }
    if(this.$route.query.type == 'driver'){
      this.getExtra();
    }
    if(this.userinfo.UserBizType != 'driver'){
      this.getBalance();
    }
  },
  methods:{
    gotoMsg(){
      this.$router.push({
        path:'/user/msg'
      })
    },
    getExtra(){
      this.showLoad = true;
      var _this = this;
      var query = {
        StaffID: this.userinfo.StaffID,
      }
      this.Ajax.post("GetDriverExtraInfo", query).then(function(resp) {
        _this.showLoad = false;
          if(resp.IsSuccess) {
            _this.extraData = resp.Data;
          } else {
            _this.$vux.toast.show({
              type: "warn", //success, warn, cancel, text
              text: resp.ErrorMessage
            });
          }
      });
    },

    getBalance(){
      this.showLoad = true;
      var self = this,
          query = {
            BelongGuid: self.userinfo.BelongGuid,
          }
      this.Ajax.post('GetBalance',query).then(function(resp) {
        self.showLoad = false;
        self.Balance = resp.Data.Balance;
      });
    },
    // goods(){
    //   this.$router.push({
    //     path:'/user/goods'
    //   })
    // },
    // custom(){
    //   this.$router.push({
    //     path:'/user/custom'
    //   })
    // },
    exit(){
      sessionStorage.clear();
      localStorage.clear();
      this.$router.push({
        path:'/login'
      })
    },
    goLevel(){
      this.$router.push({
        path:'/user/level'
      })
    }
  }
}
</script>